<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/styles/global.css" />
	<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/styles/global_color.css" />
    <base href="<%=basePath%>">
    
    <title>My JSP 'service_add.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript"  src="js/prototype-1.6.0.3.js" ></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/messages_zh.js"></script>
	 <script language="javascript" type="text/javascript">
	 $().ready(function() {//默认表单提交时验证
			// 在键盘按下并释放及提交后验证提交表单
		  	$(".main_form").validate({
				//校验规则
			    rules: {
			    	name: {
				        required: true,//不能为空
				        rangelength:[1,50]//输入长度必须介于 6 和 20 之间的字符串（汉字算一个字符）。
					},
		  		baseDuration: {	  
			        rangelength:[1,50]//输入长度必须介于 6 和 20 之间的字符串（汉字算一个字符）。
				},
				baseCost:{
					rangelength:[1,50]//输入长度必须介于 6 和 20 之间的字符串（汉字算一个字符）。
					},
				unitCost:{
					rangelength:[1,50]//输入长度必须介于 6 和 20 之间的字符串（汉字算一个字符）。
				}				
			    },
			  	//设置错误提示信息
			    name: {
			    	name: {
				        required: "请输入资费名称",
				        rangelength: "请输入1-16位字符串"
			      	}	  
			    },
			    //设置错误信息存放地方
			    errorPlacement:function(error,element) {
			    	console.log(element);
			        error.appendTo(element.next().next());//将错误信息追加到id=name_msg的标签末尾（内部）
			    }
			});
		});
	 
	 
	 
	 
	 
	 
	 
	 
	 
            //保存结果的提示
            function showResult() {
                showResultDiv(true);
                window.setTimeout("showResultDiv(false);", 3000);
            }
            function showResultDiv(flag) {
                var divResult = document.getElementById("save_result_info");
                if (flag)
                    divResult.style.display = "block";
                else
                    divResult.style.display = "none";
            }

            //切换资费类型
            function feeTypeChange(type) {
                var inputArray = document.getElementById("main").getElementsByTagName("input");
                if (type == 1) {
                    inputArray[4].readonly = true;
                    inputArray[4].value = "";
                    inputArray[4].className += " readonly";
                    inputArray[5].readonly = false;
                    inputArray[5].className = "width100";
                    inputArray[6].readonly = true;
                    inputArray[6].className += " readonly";
                    inputArray[6].value = "";
                }
                else if (type == 2) {
                    inputArray[4].readonly = false;
                    inputArray[4].className = "width100";
                    inputArray[5].readonly = false;
                    inputArray[5].className = "width100";
                    inputArray[6].readonly = false;
                    inputArray[6].className = "width100";
                }
                else if (type == 3) {
                    inputArray[4].readonly = true;
                    inputArray[4].value = "";
                    inputArray[4].className += " readonly";
                    inputArray[5].readonly = true;
                    inputArray[5].value = "";
                    inputArray[5].className += " readonly";
                    inputArray[6].readonly = false;
                    inputArray[6].className = "width100";
                }
            }
            $(".main_form").validate({
			//校验规则
		    rules: {
		  		 /*    firstname: "required", */
	    	    name: {
			        required: true,//不能为空
			        rangelength:[0,50]//输入长度必须介于 6 和 20 之间的字符串（汉字算一个字符）。
				},
				baseDuration : {
					required: true,
					digits: true,
					range:[0,600]
				},
				baseCost : {
					required: true,
					digits: true,
					range:[0,9999.99]
				},
				unitCost : {
					required: true,
					digits: true,
					range:[0,9999.99]
				},
				desr : {
					 rangelength:[0,100]
				}
		    },
		  		//设置错误提示信息
		  	 	 messages: {
				/* 	    firstname: "请输入您的名字", */
	      	   		 name: {
				        required: "资费名不能为空",
				        rangelength: "不能超过50个字符"
		      		},
		      		baseDuration : {
		      			required: "基本时长不能为空",
		      			digits: "只能为数字",
		      			range: "0-600的数"
		      		},
		      		baseCost : {
		      			required: "基本费用不能为空",
		      			digits: "只能为数字",
		      			rangelength: "8长度以内的字母、数字和下划线的组合",
		      			range: "0-9999.99的数"
		      		},
		      		unitCost : {
		      			required: "单位费用不能为空",
		      			digits: "只能为数字",
		      			rangelength: "6-18位的字母、数字和下划线的组合",
		      			range: "0-9999.99的数"
		      		},
		      		desr : {
		      			rangelength: "不能超过100个字符"
		      		}
		    	},
		   	 //设置错误信息存放地方
		   	 errorPlacement:function(error,element) {
		    	/* console.log(element); */
		        error.appendTo(element.next().next());
		   	 }
			});
			
			function checkName() {
				if(!$("#name").valid()){//校验
					return false;
				};
				var flag=false;
				$.ajax({
					url:"${pageContext.request.contextPath}/fee/fee_add.jsp",
					type:"GET",
					datatype:"text",
					success:function(data){
						//进行ajax返回的数据处理
							flag=true;
					},
					async:false
				});
				if(flag){
					$("#d1").text("通过验证").css("color","green");
					return true;
				}else{
					$("#d1").text("该IP地址下已存在此账号").css("color","red");
					return false;
				}
			}
			
			function checkBaseDuration() {
				if(!$("#baseDuration").valid()){//校验
					return false;
				};
			}
			
			function checkBaseCost() {
				if(!$("#baseCost").valid()){//校验
					return false;
				};
			}
			
			function checkUnitCost() {
				if(!$("#unitCost").valid()){//校验
					return false;
				};
			}
			
			function checkDesr() {
				if(!$("#desr").valid()){//校验
					return false;
				};
			}
            
        </script>
  </head>
  
   <body>
<div id="header"> <img src="../images/logo.png" alt="logo" class="left"/> <a href="#">[退出]</a> </div>
<div id="navi">
<%@include file="/jsp/commen/menu.jsp" %>
        </div>
<div id="main">
          <div id="save_result_info" class="save_fail">保存失败，资费名称重复！</div>
          <form action="" method="" class="main_form">
    <div class="text_info clearfix"><span>资费名称：</span></div>
    <div class="input_info">
              <input type="text" class="width300" placeholder="50长度的字母、数字、汉字和下划线的组合" id="name" name="name" onblur="checkName();"/>
              <span class="required">*</span><span id="d1"></span>
            </div>
    <div class="text_info clearfix"><span>资费类型：</span></div>
    <div class="input_info fee_type">
              <input type="radio" name="costType" id="monthly" onClick="feeTypeChange(1);"/>
              <label for="monthly">包月</label>
              <input type="radio" name="costType" checked="checked" id="package" onClick="feeTypeChange(2);"/>
              <label for="package">套餐</label>
              <input type="radio" name="costType" id="timeBased" onClick="feeTypeChange(3);"/>
              <label for="timeBased">计时</label>
            </div>
    <div class="text_info clearfix"><span>基本时长：</span></div>
    <div class="input_info">
              <input type="text" placeholder="1-600之间的整数" class="width100" id="baseDuration" name="baseDuration" onblur="checkBaseDuration();" />
              <span class="info,required">小时</span> <span class="required" id="d2">*</span>
              
            </div>
    <div class="text_info clearfix"><span>基本费用：</span></div>
    <div class="input_info">
              <input type="text" placeholder="0-99999.99之间的数值" class="width100" id="baseCost" name="baseCost" onblur="checkBaseCost();"/>
              <span class="info">元</span> <span class="required" id="d3">*</span>
          
            </div>
    <div class="text_info clearfix"><span>单位费用：</span></div>
    <div class="input_info">
              <input type="text" placeholder="0-99999.99之间的数值" class="width100" id="unitCost" name="unitCost" onblur="checkUnitCost();"/>
              <span class="info">元/小时</span> <span class="required" id="d4">*</span>
            </div> 
    <div class="text_info clearfix"><span>资费说明：</span></div>
    <div class="input_info_high">
              <textarea class="width300 height70" id="desr" name="desr" onblur="checkDesr();"></textarea>
              <span></span><span id="d5"></span>
            </div>
    <div class="button_info clearfix">
              <input type="button" value="保存" class="btn_save" onClick="showResult();"/>
              <input type="button" value="取消" class="btn_save"/>
            </div>
  </form>
        </div>
<div id="footer"> <span>[源自橡树的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</span> <br/>
          <span>版权所有(C)橡树信息科技有限公司 </span> </div>
</body>
</html>
